<template>
  <div class='dashBoard-container'>
    <a-row :gutter="20">
      <a-col :span="6">
        <div class='whiteBg'>
          <div class='top-box'>
            <p>今日告警</p>
            <div class="fx_end">
              <span class='num'>{{list.todayAlarmCount}}</span>
              <img src="~@/assets/images/img/icon_13.png" alt="" style='width:50px;height:50px;' />
            </div>
          </div>
          <div class='bottom-box'>
            <a-row>
              <a-col :span="24">
                <div class='fx_end'>
                  <div><span class='circular red'></span>当月告警</div>
                  <div>{{list.monthAlarmCount}}</div>
                </div>
              </a-col>
            </a-row>

          </div>
        </div>
      </a-col>
      <a-col :span="6">
        <div class='whiteBg'>
          <div class='top-box'>
            <p>告警配置</p>
            <div class="fx_end">
              <span class='num'>{{list.alarmConfigCount}}</span>
              <img src="~@/assets/images/img/icon_27.png" alt="" style='width:50px;height:50px;' />
            </div>
          </div>
          <div class='bottom-box'>
            <a-row :gutter="75">
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular green'></span>正常</div>
                  <div>{{list.alarmConfigEnableCount}}</div>
                </div>
              </a-col>
              <a-col :span="12">
                <div class='fx_end'>
                  <div><span class='circular red'></span>禁用</div>
                  <div>{{list.alarmConfigDisableCount}}</div>
                </div>
              </a-col>
            </a-row>

          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class='whiteBg' style='min-height: 140px;    height: 140px;'>
          <div style='padding:16px'>
            <p>最新告警</p>
            <ul style='margin-top: 6px;'>
              <li class='fx_end' v-for="(item, index) in list.alarmLogList" :key="index" style='margin-top: 6px;'>
                <div>
                  <img src="~@/assets/images/img/hot.png" alt="" style='width:14px;height:14px;' />
                  <span style='margin-left: 3px;'>{{item.createTime}}</span>
                  <span style="color:#315DFA;margin-left:30px">{{item.alarmName}}</span>
                </div>
                <div>
                  <span class='red-text'><span></span>{{item.logStatus}}</span>
                  <span class='orange-text'>{{item.alarmLevel}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </a-col>

    </a-row>
    <a-row style='margin-top:16px'>
      <a-col :span="24">
        <div class='whiteBg'>
          <div style="padding:20px 12px">
            <div class="fx_end" style='margin-bottom:40px;'>
              <div><span class='square'></span>告警统计</div>
              <div>
                <a-radio-group v-model:value="barType" @change="statisticst" style='margin-right:20px'>
                  <a-radio-button value="1">最近1小时</a-radio-button>
                  <a-radio-button value="2">最近24小时</a-radio-button>
                  <a-radio-button value="3">近一周</a-radio-button>
                </a-radio-group>
                <a-range-picker v-model:value="searchParams.rangeDate" format="YYYY-MM-DD HH:mm:ss"
                  :showTime="{ hideDisabledOptions: false }" @change="handleChangeSearchDate" />
              </div>
            </div>
            <a-row>
              <a-col :span="18">
                <SingleLine v-if="list.barDataSource.length>0" :chartData="list.barDataSource" height="500px"
                  :option="singleLineOption"></SingleLine>
                <a-empty v-else />
              </a-col>
              <a-col :span="6" class='alarmList'>
                <p>告警排名</p>
                <ul v-if='list.alarmList.length>0'>
                  <li class="fx_end" v-for="(item, index) in list.alarmList" :key="index">
                    <div>
                      <span class='nub'>{{index+1}}</span>
                      <span>{{item.deviceName}}</span>
                    </div>
                    <div style='margin-right:20px'>{{item.staticCount}}</div>
                  </li>
                </ul>
                <a-empty v-else />
              </a-col>
            </a-row>


          </div>

        </div>

      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onBeforeUnmount, unref } from 'vue';
  import SingleLine from '/@/components/chart/SingleLine.vue';
  import { getAlarmInfo, getAlarmLogTopNInfo, getAlarmLogLineInfo } from './DashBoard.ts';

  const loading = ref(true);
  const barType = ref('3');
  const activeKey = ref('bar');
  const singleLineOption = {
    grid: { left: '5%', right: '5%' },
    lineStyle: {
      color: '#BAC9F0',
    },
    areaStyle: {
      borderColor: '#000000', // 设置边界线颜色
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0, color: '#BAC9F0'  // 100% 处的颜色
        }, {
          offset: 1, color: 'rgba(186,201,240,0.3)' //   0% 处的颜色
        }],
        global: false // 缺省为 false
      },
    },

  };
  // 查询区域存储值
  const searchParams = reactive({
    rangeDate: [],
  });

  const listQuery = {
    endDateTime: '',
    selectType: '3',
    startDateTime: ''
  };

  let list = reactive({
    alarmConfigCount: '',
    alarmConfigDisableCount: '',
    alarmConfigEnableCount: '',
    alarmLogList: [],
    monthAlarmCount: '',
    todayAlarmCount: '',
    barDataSource: [],
    alarmList: [],
  });
  // 选择统计类别
  function statisticst(e) {
    barType.value = e.target.value
    listQuery.selectType = e.target.value.toString()
    listQuery.startDateTime = ''
    listQuery.endDateTime = ''
    searchParams.rangeDate = []
    alarmLogLineInfo()
    alarmLogTopNInfo()
  }

  function handleChangeSearchDate(_value, dateStringArray) {
    listQuery.selectType = '4'
    barType.value = '4'
    listQuery.startDateTime = dateStringArray[0]
    listQuery.endDateTime = dateStringArray[1]
    alarmLogLineInfo()
    alarmLogTopNInfo()
  }


  function alarmInfo() {
    getAlarmInfo().then((res) => {
      if (res.success) {
        list.alarmConfigCount = res.result.alarmConfigCount
        list.alarmConfigDisableCount = res.result.alarmConfigDisableCount
        list.alarmConfigEnableCount = res.result.alarmConfigEnableCount
        list.alarmLogList = res.result.alarmLogList
        list.monthAlarmCount = res.result.monthAlarmCount
        list.todayAlarmCount = res.result.todayAlarmCount
      }
    });
  }
  function alarmLogLineInfo() {
    let barData = []
    getAlarmLogLineInfo(listQuery).then((res) => {
      if (res.success) {
        if (res.result.length > 0) {
          for (let i = 0; i < res.result.length; i++) {
            let obj = { name: '', value: 0, seriesType: 'line' };
            obj.name = res.result[i].staticDate;
            obj.value = res.result[i].staticCount;
            barData.push(obj);
          }
          list.barDataSource = barData
        } else {
          list.barDataSource = []
        }
      }
    });
  }

  function alarmLogTopNInfo() {
    getAlarmLogTopNInfo(listQuery).then((res) => {
      if (res.success) {
        list.alarmList = res.result
      }
    });
  }
  alarmInfo()
  alarmLogLineInfo()
  alarmLogTopNInfo()
</script>
<style lang="less" scoped>
  .fx {
    display: flex;
    padding: 0;
  }

  .fx_end {
    display: flex;
    justify-content: space-between;
  }

  .fx-center {
    justify-content: center;
    align-items: center;
  }

  p {
    margin: 0;
    padding: 0
  }

  a {
    font-size: 14px;
    color: #243AA6;
  }

  .dashBoard-container {
    padding: 18px;

    .whiteBg {
      background: #fff;
    }

    .square {
      width: 8px;
      height: 8px;
      background: #243AA6;
      display: inline-block;
      margin-right: 14px;
    }

    .red-text {
      color: #FF0000;

      span {
        width: 6px;
        height: 6px;
        background: rgba(255, 0, 0, 0.6);
        border-radius: 50%;
        border: 1px solid #FF0000;
        margin-right: 10px;
        display: inline-block;
      }
    }

    .orange-text {
      font-size: 12px;
      color: #FFFFFF;
      width: 60px;
      height: 20px;
      line-height: 20px;
      background: #F9BE48;
      border-radius: 2px 2px 2px 2px;
      margin-left: 30px;
      display: inline-block;
      text-align: center;
    }

    .alarmList {
      font-size: 14px;
      color: #615851;

      ul {
        margin-top: 17px;
      }

      li {
        margin-bottom: 24px;
      }

      li:last-child {
        margin-bottom: 0;
      }

      li:nth-child(1) .nub {
        background: #E40112;
      }

      li:nth-child(2) .nub {
        background: #FE9456;
      }

      li:nth-child(3) .nub {
        background: #FABD48;
      }

      li:nth-child(4) .nub {
        background: #999999;
      }

      .nub {
        width: 18px;
        height: 18px;
        line-height: 18px;
        background: #BBBBBB;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: 1px 1px 1px 1px;
        color: #FFFFFF;
        display: inline-block;
        text-align: center;
        margin-right: 10px
      }
    }

    .top-box {
      padding: 16px 16px 0 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      p {
        font-size: 12px;
        color: #615851;
      }

      .num {
        font-weight: 600;
        font-size: 24px;
        color: #272624;
      }
    }

    .bottom-box {
      padding: 14px 18px 18px;
      font-size: 10px;
      color: #333333;

      .circular {
        width: 4px;
        height: 4px;
        margin-right: 10px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        margin-top: -3px;
      }

      .green {
        background: rgba(0, 193, 89, 0.8);
        border: 1px solid #00C159;
      }

      .red {
        background: rgba(255, 0, 0, 0.6);
        border: 1px solid #FF0000;
      }
    }


  }
</style>
